<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowRight, DataAnalysis, Box, StarFilled, TrendCharts, ChatDotRound } from '@element-plus/icons-vue'

const router = useRouter()

const features = [
  {
    title: '时间容器',
    description: '创建并管理你的时间投入，记录实际耗时与预估时间',
    icon: 'Box',
    route: '/container',
    actionText: '开始记录'
  },
  {
    title: '经验价值评估',
    description: '为每个完成的时间容器评分，记录经验与反思',
    icon: 'StarFilled',
    route: '/evaluation',
    actionText: '进行评估'
  },
  {
    title: '有效性洞察',
    description: '分析你的时间投入与经验价值，发现效率提升空间',
    icon: 'DataAnalysis',
    route: '/insights',
    actionText: '查看分析'
  },
  {
    title: '探索营地',
    description: '分享你的卡点，获取社区解决方案，共同成长',
    icon: 'ChatDotRound',
    route: '/campfire',
    actionText: '加入社区'
  }
]

function navigateTo(route) {
  router.push(route)
}
</script>

<template>
  <div class="home-container">
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">Time Capsule</h1>
        <p class="hero-subtitle">让经验可量化、可追溯、可优化</p>
        <p class="subtitle">不只是记录时间，更是构建属于你的「行为有效性知识库」</p>
        <div class="hero-actions">
          <el-button type="primary" size="large" @click="navigateTo('/container')" class="start-button">
            <el-icon><ArrowRight /></el-icon>
            开始使用
          </el-button>
          <el-button size="large" @click="navigateTo('/insights')">
            <el-icon><DataAnalysis /></el-icon>
            查看洞察
          </el-button>
        </div>
      </div>
      <div class="hero-image">
        <img src="../assets/time-illustration.svg" alt="时间管理插图" />
      </div>
    </div>
    
    <div class="features-section">
      <h2 class="section-title">核心功能</h2>
      <div class="feature-cards">
        <el-card v-for="feature in features" :key="feature.title" class="feature-card app-card" shadow="hover">
          <template #header>
            <div class="feature-header">
              <el-icon :size="24" class="feature-icon">
                <component :is="feature.icon"></component>
              </el-icon>
              <h3>{{ feature.title }}</h3>
            </div>
          </template>
          <p>{{ feature.description }}</p>
          <el-button text type="primary" @click="navigateTo(feature.route)" class="feature-action">
            了解更多
            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
        </el-card>
      </div>
    </div>
    
    <div class="how-to-section">
      <h2 class="section-title">如何使用</h2>
      <el-timeline>
        <el-timeline-item 
          v-for="(step, index) in [
            {title: '创建时间容器', description: '设置任务名称和预估时间', type: 'primary', color: '#409EFF'},
            {title: '专注执行', description: '在容器中完成你的任务', type: 'success', color: '#67C23A'},
            {title: '评估与复盘', description: '为行为打分并记录经验', type: 'warning', color: '#E6A23C'}
          ]" 
          :key="index"
          :type="step.type"
          :color="step.color"
        >
          <el-card class="step-card app-card">
            <template #header>
              <div class="step-header">
                <span class="step-number">{{ index + 1 }}</span>
                <h3>{{ step.title }}</h3>
              </div>
            </template>
            <p>{{ step.description }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <div class="cta-section">
      <el-card class="cta-card app-card" shadow="hover">
        <h2>准备好提升你的时间管理效率了吗？</h2>
        <p>立即开始使用Time Capsule，记录你的时间投入，评估经验价值，获取洞察分析。</p>
        <el-button type="primary" size="large" @click="navigateTo('/container')" class="cta-button">
          立即开始
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  width: 100%;
}

/* 英雄区域样式 */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border-radius: 0 0 30px 30px;
  margin-bottom: 60px;
  overflow: hidden;
}

.hero-content {
  flex: 1;
  padding: 0 20px;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 16px;
  line-height: 1.2;
  animation: fadeInUp 0.8s ease;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--primary-text);
  margin-bottom: 12px;
  animation: fadeInUp 1s ease;
}

.subtitle {
  font-size: 1.1rem;
  color: var(--regular-text);
  margin-bottom: 32px;
  max-width: 600px;
  animation: fadeInUp 1.2s ease;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  animation: fadeInUp 1.4s ease;
}

.start-button {
  padding: 12px 24px;
  font-size: 1.1rem;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInRight 1s ease;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  max-height: 400px;
}

/* 功能区域样式 */
.features-section {
  padding: 40px 0 60px;
  margin-bottom: 60px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.feature-card {
  height: 100%;
  transition: all 0.3s ease;
}

.feature-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.feature-icon {
  color: var(--primary-color);
}

.feature-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.feature-card p {
  color: var(--regular-text);
  margin-bottom: 16px;
  line-height: 1.6;
}

.feature-action {
  margin-top: auto;
}

/* 使用步骤区域样式 */
.how-to-section {
  padding: 40px 0 60px;
  margin-bottom: 60px;
  background-color: #f9fafc;
  border-radius: 16px;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
}

.step-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.step-card {
  margin-bottom: 0;
}

/* 号召行动区域样式 */
.cta-section {
  padding: 40px 0 80px;
  text-align: center;
}

.cta-card {
  padding: 40px;
  text-align: center;
  background: linear-gradient(135deg, #ecf5ff 0%, #f5f7fa 100%);
}

.cta-card h2 {
  font-size: 1.8rem;
  color: var(--primary-text);
  margin-bottom: 16px;
}

.cta-card p {
  color: var(--regular-text);
  margin-bottom: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  padding: 12px 32px;
  font-size: 1.1rem;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    padding: 40px 0;
  }
  
  .hero-content {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
    font-size: 1.3rem;
  }
  
  .subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
  }
  
  .cta-card {
    padding: 30px 20px;
  }
  
  .cta-card h2 {
    font-size: 1.5rem;
  }
}
</style>